<html>
  <head>
  
  <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
  <META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
  
  <title>Test Aup</title>
  	<script src="js/jquery.js"></script>
	<script src="js/jquery-ui.custom.js"></script>
	<script src="js/aup.js"></script>
	
	<script>
		$(function() {
  			
			
			var table =  aup.widget();
			table.people = [ { firstName: 'Bert', lastName: 'Bertington' },
            				{ firstName: 'Charles', lastName: 'Charlesforth' },
            				{ firstName: 'Denise', lastName: 'Dentiste' }];
			aup.bind(table, 'table');
			
			var list =  aup.widget();
			list.elems = ['ab', 'bb', 'bc'];
			list.canc = function(val, index){
				var conf = confirm('vuoi rimuovere ' + val +'?');
				if(conf) list.elems.splice(index, 1);
				feedback.message('rimosso ' + val);
				aup.publish('update');
			};
			list.listen('update');
			aup.bind(list, 'list');
			
			var model =  aup.widget();
			model.init = function(id){};
			model.mex = 'hello';
			model.sal = function(){ 
				list.elems.push(model.mex);
				aup.publish('update');
				feedback.message('aggiunto ' + model.mex);
				
			};
			aup.bind(model, 'message');
			
			var nestedList =  aup.widget();
			nestedList.elems = ['ab', 'bb', 'bc'];
			aup.bind(nestedList, 'nestedList');
			
			var nested =  aup.widget();
			nested.nested = 'static nested text';
			aup.bind(nested, 'nested');
			
			var add =  aup.widget();
			add.name = aup.field('name');
			add.add = function(){
				var name = add.name();
				list.elems.push(name);

				aup.publish('update');
				feedback.message('aggiunto ' + name);
				
				return false;
			};
			aup.bind(add, 'add');
			
			var vis =  aup.widget();
			vis.checkVisibility = function(){
				return list.elems.length % 2 != 0;
			};
			vis.listen('update');
			aup.bind(vis, 'vis');
			
			var testNum =  aup.widget();
			testNum.indexMore = function(index){
				return 'index_' + index+"_text";
			};
			testNum.test = function(id){
				alert(id);
			};
			testNum.show = function(element){
				alert($(element).text());
			};
			aup.bind(testNum, 'testNum');
			
			var feedback =  aup.widget();
			feedback.message = aup.observe();
			feedback.message('Feedback');
			feedback.isHidden = function(){ 
				return feedback.message() == 'Feedback';
			}
			feedback.color = function(){ 
				if(list.elems.length % 2 != 0)
					return 'red';
				else
					return 'blue';
			}
			feedback.isUnderline = function(){ 
				return list.elems.length % 2 != 0;
			}
			
			aup.bind(feedback, 'feedback');
			aup.bind(feedback, 'feedback2');
			
		});
  	</script>
  </head>
  <body>
  	<div>
  		<span id='feedback' bind='text: message, css visibility hidden: isHidden, css color: color, css text-decoration: isUnderline' style='text-decoration: underline'>Feedback</span>
  	</div>
  	
	<span id ="message" bind='text:mex, click:sal'>test</span>
	<table>
		<tbody id ="table" >
        	<tr bind="foreach: people">
            	<td bind="text: firstName"></td>
            	<td bind="text: lastName"></td>
            </tr>
    	</tbody>
    </table>
    
    <form id="add" bind='submit: add' >
 		<input type="text" id='name' name="name" />
  	</form>
  	
    <div id="list" >
  		<div bind="foreach: elems 10">
  			<span bind="text: index" ></span><span bind="text: val" ></span><span bind="click: canc val index" >  Canc</span><br>
  		</div>
  	</div>
  	<br>
  	<br>
  	<span>NESTED:</span>
  	<div id="nestedList" >
  		<div bind="foreach: elems">
  			<span bind="text: val" ></span><span id='nested' bind="text: nested" >  nested</span><br>
  		</div>
  	</div>
  	<div>
  		<span id='vis' bind='css visibility hidden: checkVisibility' >VISIBLE:</span>
  	</div>
  	<br>
  	<br>
  	<div>
  		<div id='testNum' bind="foreach:  5" >
  			<span bind="text: indexMore index, attr id: concat $index_$ index, click: test id, click: show dom"  ></span><br>
  			<span bind="text: concat $separation_text_$ index"  ></span>
  		</div>
  	</div>
  	
  	<div>
  		<span id='feedback2' bind='text: message' >Feedback</span>
  	</div>
  	
  	
  </body>
</html>